<template>
  <button
    class="confirmBtn"
    :class="{
      disabledClick: !this.canVote,
      takeEffected: isSetCanVote ? this.isCanVote : false,
      editVoteInfo: !isSetCanVote ? voteID : false
    }"
    @click.stop="handleConfirm"
    :disabled="!this.canVote"
  >
    {{ title }}
  </button>
</template>

<script>
export default {
  props: {
    title: String,
    taskGroupID: Number,
    taskID: Number,
    taskSettings: Object,
    canVote: Boolean,
    isSetCanVote: Boolean,
    voteItemID: Number
  },
  computed: {
    currTaskSetTimeObj() {
      // console.log(this.taskSettings, this.canVote);
      return this.taskSettings?.[this.taskID];
    },
    isCanVote() {
      // console.log(this.currTaskSetTimeObj?.canVote);
      return this.currTaskSetTimeObj?.canVote;
    },
    voteID() {
      return this.currTaskSetTimeObj?.voteID;
    }
  },
  methods: {
    handleConfirm() {
      if (this.isSetCanVote) {
        this.$emit("handleConfirm", {
          taskGroupID: this.taskGroupID,
          taskID: this.taskID,
          canVote: this.canVote === undefined ? undefined : !this.isCanVote,
        }, "canVote");
      } else {
        // 打开创建弹窗
        this.$emit("openVoteDialog", {
          taskID: this.taskID,
          voteID: this.voteID,
          voteItemID: this.voteItemID
        },this.voteID ? "edit" : "create")
      }
      
    },
  },
};
</script>

<style lang="stylus" scoped>
button {
  cursor: pointer;
  outline: none;
  width: 72px;
  height: 29px;
  border-radius: 5px;
  border: none;
  font-family: Yu Gothic UI;
  font-size: 14px;
  color: #fff;
  background: #02497c;
  transition: opacity 0.1s linear;
}

button:hover {
  opacity: 0.9;
}

.disabledClick {
  cursor: not-allowed;
  background: #ccc;
}

.takeEffected {
  background: #F5222D;
}

.editVoteInfo {
  background: #5ad551;
}
</style>